<h2>Book模块，通过Mock.Js模拟发起请求，获取和增加和删除。</h2>
<button (click)="send()" nz-button>获取books</button>
<div class="container">
  <h3>这里添加后，会再次请求获取所有，因为获取所有是假数据，所以数据会乱是正常现象。</h3>
  <div class="form-group row">
    <div class="col-sm-3">
      <input type="text" class="form-control" [(ngModel)]="title" placeholder="Title" nz-input/>
    </div>
    <div class="col-sm-3">
      <input type="text" class="form-control" [(ngModel)]="author" placeholder="Author" nz-input/>
    </div>
    <div class="col-sm-3">
      <input type="text" class="form-control" [(ngModel)]="description" placeholder="Description" nz-input/>
    </div>
    <div class="col-sm-3">
      <button type="button" class="btn btn-primary" (click)="addBook()" nz-button>Add Book</button>
    </div>
  </div>
  <table class="table">
    <thead>
    <tr>
      <th scope="col">Title</th>
      <th scope="col">Author</th>
      <th scope="col">Description</th>
      <th scope="col">&nbsp;</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let book of books$ | async">
      <td>{{ book.title }}</td>
      <td>{{ book.author }}</td>
      <td>{{ book.description }}</td>
      <td>
        <button type="button" class="btn btn-danger" (click)="deleteBook(book.id)" nz-button>Delete</button>
      </td>
    </tr>
    </tbody>
  </table>
</div>
